<template>
  <div class="profile-page">
    <div class="page-header">
      <h1>个人资料</h1>
      <p>管理您的账户信息和设置</p>
    </div>

    <a-row :gutter="24">
      <!-- 基本信息 -->
      <a-col :span="16">
        <a-card title="基本信息" class="profile-card">
          <a-form
            :model="profileForm"
            :rules="rules"
            layout="vertical"
            @finish="updateProfile"
          >
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="用户名" name="username">
                  <a-input
                    v-model:value="profileForm.username"
                    placeholder="请输入用户名"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="邮箱" name="email">
                  <a-input
                    v-model:value="profileForm.email"
                    placeholder="请输入邮箱"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            
            <a-form-item label="个人简介" name="bio">
              <a-textarea
                v-model:value="profileForm.bio"
                placeholder="请输入个人简介"
                :rows="3"
              />
            </a-form-item>
            
            <a-form-item>
              <a-button type="primary" html-type="submit" :loading="updating">
                保存修改
              </a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>

      <!-- 账户信息 -->
      <a-col :span="8">
        <a-card title="账户信息" class="profile-card">
          <div class="account-info">
            <div class="info-item">
              <span class="label">账户类型：</span>
              <a-tag :color="getRoleColor(authStore.user?.role)">
                {{ getRoleText(authStore.user?.role) }}
              </a-tag>
            </div>
            
            <div class="info-item">
              <span class="label">注册时间：</span>
              <span>{{ formatDate(authStore.user?.createdAt) }}</span>
            </div>
            
            <div class="info-item">
              <span class="label">最后登录：</span>
              <span>{{ formatDate(authStore.user?.lastLoginAt) }}</span>
            </div>
          </div>
        </a-card>

        <a-card title="使用统计" class="profile-card">
          <div class="usage-stats">
            <div class="stat-item">
              <div class="stat-number">{{ stats.totalImages }}</div>
              <div class="stat-label">总处理图片</div>
            </div>
            
            <div class="stat-item">
              <div class="stat-number">{{ stats.totalVideos }}</div>
              <div class="stat-label">总处理视频</div>
            </div>
            
            <div class="stat-item">
              <div class="stat-number">{{ stats.successRate }}%</div>
              <div class="stat-label">成功率</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useAuthStore } from '../../stores/auth'
import { message } from 'ant-design-vue'

const authStore = useAuthStore()
const updating = ref(false)

const profileForm = reactive({
  username: '',
  email: '',
  bio: ''
})

const stats = reactive({
  totalImages: 156,
  totalVideos: 23,
  successRate: 98.5
})

const rules = {
  username: [
    { required: true, message: '请输入用户名' },
    { min: 2, max: 20, message: '用户名长度在2-20个字符之间' }
  ]
}

const getRoleColor = (role) => {
  const colorMap = {
    free: 'default',
    premium: 'blue',
    enterprise: 'purple'
  }
  return colorMap[role] || 'default'
}

const getRoleText = (role) => {
  const textMap = {
    free: '免费用户',
    premium: '高级用户',
    enterprise: '企业用户'
  }
  return textMap[role] || '未知'
}

const formatDate = (dateString) => {
  if (!dateString) return '-'
  return new Date(dateString).toLocaleDateString('zh-CN')
}

const updateProfile = async (values) => {
  updating.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 更新本地状态
    authStore.updateUser(values)
    message.success('个人资料更新成功')
  } catch (error) {
    message.error('更新失败，请重试')
  } finally {
    updating.value = false
  }
}

onMounted(() => {
  // 初始化表单数据
  if (authStore.user) {
    profileForm.username = authStore.user.username || ''
    profileForm.email = authStore.user.email || ''
    profileForm.bio = authStore.user.bio || ''
  }
})
</script>

<style scoped>
.profile-page {
  max-width: 1200px;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.page-header p {
  color: #666;
  margin: 0;
}

.profile-card {
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.account-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  font-weight: 500;
  color: #333;
}

.usage-stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #1890ff;
  margin-bottom: 8px;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

@media (max-width: 768px) {
  .ant-col {
    margin-bottom: 16px;
  }
}
</style> 